<% attachable_vms = dataset_authorize(@lb.private_subnet.vms_dataset.eager(:location), "Vm:view")
  .exclude(Sequel[:vm][:id] => @lb.vms_dataset.select(Sequel[:vm][:id]))
  .all
load_balancer_path = "#{@project.path}#{@lb.path}"
edit_perm = has_permission?("LoadBalancer:edit", @lb) %>

<div class="p-6">
  <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
    <div class="min-w-0 flex-1">
      <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
        Attached VMs
      </h3>
    </div>
  </div>
  <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
    <table class="min-w-full divide-y divide-gray-300">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">VM</th>
          <% if @lb.stack == "dual" %>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Application State (IPv4)</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Application State (IPv6)</th>
          <% else %>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Application State</th>
          <% end %>

          <% if edit_perm %>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"></th>
          <% end %>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white" id="lb-vms">
        <% @lb.vms(eager: :load_balancer_vm_ports).each do |vm| %>
          <tr>
            <td class="whitespace nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
              <a href="<%= path(vm) %>" class="text-orange-600 hover:text-orange-700"><%= vm.name %></a>
            </td>
            <td class="px-3 py-3.5 whitespace-nowrap text-sm text-gray-900">
              <%= vm.load_balancer_state.first %>
            </td>
            <% if @lb.stack == "dual" %>
              <td class="px-3 py-3.5 whitespace-nowrap text-sm text-gray-900">
                <%= vm.load_balancer_state.last %>
              </td>
            <% end %>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <% form(action: "#{load_balancer_path}/detach-vm", method: :post) do %>
                <input type="hidden" name="vm_id" value="<%= vm.ubid %>">
                <%== part("components/form/submit_button", text: "Detach") %>
              <% end %>
            </td>
          </tr>
        <% end %>
        <% if edit_perm %>
          <tr>
            <td class="whitespace-nowrap py-4 pl-2 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row">
              <%== part(
                "components/form/select",
                name: "vm_id",
                placeholder: "Select a VM",
                options: attachable_vms.map { [it.ubid, it.name] },
                attributes: {
                  required: true,
                  form: "form-lb-#{@lb.ubid}"
                }
              ) %>
            </td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"></td>
            <% if @lb.stack == "dual" %><td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"></td><% end %>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <% form(action: "#{load_balancer_path}/attach-vm", method: :post, id: "form-lb-#{@lb.ubid}") do %>
                <%== part("components/form/submit_button", text: "Attach") %>
              <% end %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
